const Utils = require("./utils.js")
const Evt = require("./event.js")
const {CN,EN} = require("./constant.js")

module.exports = class LinePicker extends Evt{
	constructor($env,$event){
		super()
		this.$event=$event;

		this.styles=["dotted","dashed","solid"];
		this.stylesMap={
			dotted:[5,5],
			dashed:[8,8],
			solid:[]
		}
		this.classMap={
			dotted:"icon-line-dotted",
			dashed:"icon-line-dashed",
			solid:"icon-line"
		}
		this.$dom = Utils.createDOM("div",{
			id:"line-picker-wrap",
			class:`line-picker-wrap draw-plugin-wrap`
		})

		let __tpl = `<button data-type="{type}" id="line-picker-{type}" class="action-btn line-picker-item iconfont {cla}"></button>`
		this.$dom.innerHTML = this.styles.map((line)=>{
			let obj={
				type:line,
				cla:this.classMap[line]
			}
			return __tpl.replace(/{(.*?)}/g,(a,b)=>obj[b])
		}).join("")

		$event.emit(EN.plugin_append,this.$dom);

		this.bind()
	}
	bind(){
		this.$dom.addEventListener("click",(e)=>{
			this.onPick(e)
		})
	}
	onPick(e){
		let t = e.target;
		if(t.tagName==="BUTTON"){
			let prev = this.$dom.querySelector(".active");
			prev&&prev.classList.remove("active")
			t.classList.add("active")
			this.$event.emit("line-pick",this.stylesMap[t.dataset.type])
		}
	}
	show(){
		this.$dom.classList.remove(CN.disabled)
	}
	hide(){
		this.$dom.classList.add(CN.disabled)
	}

}